<template>
    <el-container>
        <el-header>
            <span style="font-size:30px"><b>新龙生态林套票系统：售票</b></span>
            <br/><br/>
            <el-input placeholder="请输入手机号" style="width:40vh;margin-bottom:20px" v-model="phoneNum"/>
            <br/>
             <el-select v-model="choosenPack" placeholder="请选择" style="width:40vh" @change="proTableData()">
                <el-option
                v-for="item in allPacks"
                :key="item.name"
                :label="item.name"
                :value="item.name">
                </el-option>
            </el-select>
            <br/><br/>
            <el-button @click="checkShopInfo()" type="primary">购买</el-button>
        </el-header>
        <el-main>
            <el-table
                :data="proTableShow"
                style="width:40vh;margin:auto"
                border
            >
                <el-table-column
                    prop="name"
                    align="center"
                    label="项目"
                >
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            design by wys
        </el-footer>
        <el-dialog
        title="输入售票员密码"
        v-model="dialogVisible"
        width="30%"
        :close-on-click-modal='false'
        :close-on-press-escape='false'
        :show-close='false'
        >
            <el-input v-model="tempPwd" placeholder="请输入" style="margin:5px"/>
            <span v-if="message" style="color:red">{{message}}</span>
            <br/>
            <el-button style="margin:5px" @click="checkpwd()">确认</el-button>
        </el-dialog>
        <el-dialog
        title="确认购买"
        v-model="dialogShopping"
        width="30%"
        :show-close='false'
        >
            <span><b>手机号：{{phoneNum}}</b></span>
            <br/><br/>
            <span><b>项目：{{choosenPack}}</b></span>
            <br/><br/>
            <span>数量：</span>
            <el-input-number v-model="shoppingAcc.num" :min="1" :max="9" label="购买数量" style="width:10vh" size="small"></el-input-number>
            <br/><br/>
            <el-button style="margin:5px" @click="shoppingConfirm()" type="danger">确认</el-button>
        </el-dialog>
    </el-container>
    
</template>

<script lang="ts">
import { reactive, toRefs, onMounted} from 'vue';
import axios from 'axios'
import allPacks from '../assets/pack.json'

export default {
    name: 'Seller',
    setup() {
        const data = reactive({
            page: 'Seller' as string,
            message: '' as string,
            dialogVisible: true as boolean,
            dialogShopping: false as boolean,
            tempPwd: '' as string,
            phoneNum: '' as string,
            choosenPack: '' as string,
            shoppingAcc:{
                phoneNum: '' as string,
                choosenPack: '' as string,
                num: 1 as number,
                proNum: {} as number,
            } as any,
            proTableShow:[] as any,
        })

        const methods = reactive({
            checkpwd:() => {
                if(data.tempPwd == data.password.find((item: any) => item.Name == data.page)?.Password){
                    data.dialogVisible = false
                } else {
                    data.message = '密码错误'
                }
            },
            proTableData:() => {
                data.proTableShow = (allPacks.find((item: any) => item.name == data.choosenPack)?.project).map((item: any) => {
                    return {
                        name: item,
                    }
                })
            },
            checkShopInfo:() => {
                if(data.phoneNum == ''){
                    window.alert('请输入手机号')
                    return
                }
                axios({
                    url: '/api/infoSearch',
                    method: 'post',
                    data:{
                        phoneNum: data.phoneNum,
                    },
                    headers:{
                        'Content-Type' : "application/json"
                    }
                }).then((res: any) => {
                    if(res.data.data.length == 0){
                        methods.createUser()
                        return
                    }
                    data.proNum = res.data.data[0]
                    data.shoppingAcc.phoneNum = data.phoneNum
                    data.shoppingAcc.choosenPack = allPacks.find((item: any) => item.name == data.choosenPack)?.project
                    data.dialogShopping = true
                }).catch((err: any) => {
                    window.alert(err)
                })
            },
            createUser:() => {
                axios({
                    url: '/api/CreateUser',
                    method: 'post',
                    data:{
                        phoneNum: data.phoneNum,
                    },
                    headers:{
                        'Content-Type' : "application/json"
                    }
                }).then(() => {
                    window.alert('未查询到用户信息，已为您创建新用户！')
                }).catch((err: any) => {
                    console.log(err)
                })
            },
            shoppingConfirm:() => {
                if(data.shoppingAcc.num == ''){
                    window.alert('请输入数量')
                    return
                }
                data.dialogShopping = false
                const project = data.shoppingAcc.choosenPack.map((item: any) => {
                    console.log(item,data.proNum,data.shoppingAcc.num)
                    return {
                        name: item,
                        num: (parseInt(data.proNum[item]) + data.shoppingAcc.num).toString()
                    }
                })
                console.log(project)
                axios({
                    url: '/api/infoChange',
                    method: 'post',
                    data:{
                        phoneNum: data.shoppingAcc.phoneNum,
                        project
                    },
                    headers:{
                        'Content-Type' : "application/json"
                    }
                }).then(() => {
                    window.alert('购买成功')
                }).catch((err: any) => {
                    window.alert(err)
                })
            }
        })

        onMounted(() => {
            return new Promise((resolve, reject) => {
                axios({
                    url: '/api/password',
                    method: 'get'
                }).then((res: any) => {
                    data.password = res.data.data
                    resolve(true)
                }).catch((err: any) => {
                    console.log(err)
                    reject(false)
                })
            })
        })
        return {
            ...toRefs(data),
            ...toRefs(methods),
            allPacks
        }
    },
}
</script>

<style>
.el-header{
    padding: 10px;
    height: 25vh;
}
.el-main {
    height: 68vh;
}
.el-footer {
    padding: 20px;
    height: 7vh;
}
</style>